<template>
	<view class="salary-setting">
		<view class="salary-setting-title">
			薪酬设置
		</view>
		<view class="salary-setting-box">
			<view :class="['salary-setting-item',curTab==item.value?'tab-act':'']" v-for="(item,index) in tabList"
				:key="index" @tap="changeTab(item.value)">
				{{item.label}}
			</view>
		</view>
		<view class="salary-title1">
			工作日
		</view>
		<view class="work-day" v-if="curTab==1">
			<view class="work-day-item1">
				<text class="t1">星期时间设置</text>
				<text class="yzb yzb-next icon-next" @tap="setSalaryDate()"></text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">基本工资：</text>
				<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">夜班补贴：</text>
				<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">餐补：</text>
				<uni-easyinput trim class="uni-easyinput3" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元/次 X</text>
				<uni-easyinput trim class="uni-easyinput4" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入次数" />
				<text class="unit">次</text>
			</view>
			<view class="work-day-item3">
				<text class="work-day-label">餐补时间设置：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<text class="unit">第一次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第二次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第N次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
				</view>
			</view>
			<view class="work-day-item4-line"></view>
			<view class="work-day-item4-title">
				加班设置
			</view>
			<view class="work-day-item4">
				<text class="work-day-label">基本工资：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
							v-model="formData.name" placeholder="请输入金额" />
						<text class="unit">元/工作日/8小时 X</text>
					</view>
					<view class="work-day-right-item">
						<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
							v-model="formData.name" placeholder="请输入倍" />
						<text class="unit">倍</text>
					</view>
				</view>
			</view>
		</view>
		<view class="work-day" v-if="curTab==2">
			<view class="work-day-item1">
				<text class="t1">星期时间设置</text>
				<text class="yzb yzb-next icon-next" @tap="setSalaryDate()"></text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">薪酬方式：</text>
				<text class="unit2">按天结算</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">每天工资：</text>
				<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">夜班补贴：</text>
				<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">餐补：</text>
				<uni-easyinput trim class="uni-easyinput3" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元/次 X</text>
				<uni-easyinput trim class="uni-easyinput4" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入次数" />
				<text class="unit">次</text>
			</view>
			<view class="work-day-item3">
				<text class="work-day-label">餐补时间设置：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<text class="unit">第一次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第二次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第N次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
				</view>
			</view>
			<view class="work-day-item4-line"></view>
			<view class="work-day-item4-title">
				加班设置
			</view>
			<view class="work-day-item4">
				<text class="work-day-label">加班工资：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
							v-model="formData.name" placeholder="请输入金额" />
						<text class="unit">元/小时</text>
					</view>

				</view>
			</view>
		</view>
		<view class="work-day" v-if="curTab==3">
			<view class="work-day-item1">
				<text class="t1">星期时间设置</text>
				<text class="yzb yzb-next icon-next" @tap="setSalaryDate()"></text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">薪酬方式：</text>
				<text class="unit2">按小时结算</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">每小时工资：</text>
				<uni-easyinput trim class="uni-easyinput5" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">夜班补贴：</text>
				<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元</text>
			</view>
			<view class="work-day-item2">
				<text class="work-day-label">餐补：</text>
				<uni-easyinput trim class="uni-easyinput3" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入金额" />
				<text class="unit">元/次 X</text>
				<uni-easyinput trim class="uni-easyinput4" :inputBorder="false" type="number" v-model="formData.name"
					placeholder="请输入次数" />
				<text class="unit">次</text>
			</view>
			<view class="work-day-item3">
				<text class="work-day-label">餐补时间设置：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<text class="unit">第一次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第二次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
					<view class="work-day-right-item">
						<text class="unit">第N次：</text>
						<uni-datetime-picker class="uni-easyinput2" :border="false" type="date" :clear-icon="false"
							v-model="formData.name" placeholder="请选择时间" />
					</view>
				</view>
			</view>
			<view class="work-day-item4-line"></view>
			<view class="work-day-item4-title">
				加班设置
			</view>
			<view class="work-day-item4">
				<text class="work-day-label">加班工资：</text>
				<view class="work-day-right">
					<view class="work-day-right-item">
						<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
							v-model="formData.name" placeholder="请输入金额" />
						<text class="unit">元/小时</text>
					</view>
				</view>
			</view>
		</view>
		<template v-if="curTab==1">
			<!-- 周末日 -->
			<view class="salary-title2">
				周末日
			</view>
			<view class="work-day2">
				<view class="work-day-item4">
					<text class="work-day-label">基本工资：</text>
					<view class="work-day-right">
						<view class="work-day-right-item">
							<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
								v-model="formData.name" placeholder="请输入金额" />
							<text class="unit">元/工作日/8小时 X</text>
						</view>
						<view class="work-day-right-item">
							<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
								v-model="formData.name" placeholder="请输入倍" />
							<text class="unit">倍</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 节假日 -->
			<view class="salary-title2">
				节假日
			</view>
			<view class="work-day2">
				<view class="work-day-item4">
					<text class="work-day-label">基本工资：</text>
					<view class="work-day-right">
						<view class="work-day-right-item">
							<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
								v-model="formData.name" placeholder="请输入金额" />
							<text class="unit">元/工作日/8小时 X</text>
						</view>
						<view class="work-day-right-item">
							<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
								v-model="formData.name" placeholder="请输入倍" />
							<text class="unit">倍</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="fill"></view>
		<view class="btn">
			保存
		</view>
		<MSalaryDate ref="MSalaryDateRef"></MSalaryDate>
	</view>
</template>

<script>
	import MSalaryDate from './components/m-salaryDate/m-salaryDate.vue';
	export default {
		components: {
			MSalaryDate
		},
		data() {
			return {
				tabList: [{
						value: 1,
						label: '按月设置'
					},
					{
						value: 2,
						label: '按天设置'
					},
					{
						value: 3,
						label: '按小时设置'
					},
				],
				curTab: 1,
				formData: {
					name: ''
				}
			};
		},
		methods: {
			changeTab(val) {
				this.curTab = val;
			},
			// 星期时间设置
			setSalaryDate(){
				this.$refs.MSalaryDateRef.open(this.curTab);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.salary-setting {
		background: #F5F5FC;
		min-height: 100vh;
		margin-bottom: 20rpx;

		.salary-setting-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			padding: 20rpx 0 33rpx 46rpx;
		}

		.salary-setting-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.salary-setting-item {
				font-weight: 500;
				font-size: 28rpx;
				color: #888888;
				padding: 14rpx 23rpx;
				margin-right: 57rpx;
			}

			.salary-setting-item:last-child {
				margin-right: 0;
			}

			.tab-act {
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				background: #3A92FF;
				border-radius: 28rpx;
			}
		}

		.salary-title1 {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin: 35rpx 0 32rpx 46rpx;
		}

		.work-day {
			padding: 42rpx 32rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 20rpx;

			.work-day-item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 43rpx;

				.t1 {
					font-weight: bold;
					font-size: 30rpx;
					color: #3B4552;
				}

				.icon-next {
					font-size: 30rpx;
					color: #ccc;
					font-weight: bold;
				}
			}

			.work-day-item2 {
				display: flex;
				align-items: center;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
				}

				.uni-easyinput2 {
					flex: 1;
					padding-left: 76rpx;
				}

				.uni-easyinput3 {
					padding-left: 50rpx;
					flex: 1;
				}

				.uni-easyinput4 {
					flex: 1;
					padding-left: 20rpx;
				}

				.uni-easyinput5 {
					flex: 1;
					padding-left: 45rpx;
				}

				.unit {
					font-weight: 500;
					font-size: 30rpx;
					color: #222;
				}

				.unit2 {
					padding-left: 97rpx;
					font-weight: 500;
					font-size: 14px;
					color: #828282;
				}
			}

			.work-day-item3 {
				display: flex;
				justify-content: space-between;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
					flex-shrink: 0;
					margin-top: 16rpx;
				}

				.work-day-right {

					.work-day-right-item {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.unit {
							font-weight: 500;
							font-size: 30rpx;
							color: #999999;
							flex-shrink: 0;
						}

						/deep/ .uniui-calendar {
							display: none;
						}

						/deep/ .uni-date-x {
							padding-left: 0 !important;
							padding-right: 0 !important;
						}

						/deep/ .uni-date__x-input {
							padding-left: 0 !important;
							padding-right: 0 !important;
							width: 170rpx;
							text-align: right;
						}
					}


				}

			}

			.work-day-item4-line {
				height: 1rpx;
				background: #E6E6E6;
				margin: 0 0 33rpx 0;
			}

			.work-day-item4-title {
				font-weight: bold;
				font-size: 30rpx;
				color: #3B4552;
				margin-bottom: 26rpx;
			}

			.work-day-item4 {
				display: flex;
				justify-content: space-between;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
					flex-shrink: 0;
					margin-top: 16rpx;
				}

				.work-day-right {

					.work-day-right-item {
						display: flex;
						align-items: center;

						.unit {
							font-weight: 500;
							font-size: 30rpx;
							color: #999999;
							flex-shrink: 0;
						}

						.uni-easyinput2 {
							width: 240rpx;
							text-align: left;
						}
					}

				}

			}
		}

		.salary-title2 {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin: 37rpx 0 24rpx 46rpx;
		}

		.work-day2 {
			padding: 42rpx 32rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 20rpx;

			.work-day-item4 {
				display: flex;
				justify-content: space-between;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
					flex-shrink: 0;
					margin-top: 16rpx;
				}

				.work-day-right {

					.work-day-right-item {
						display: flex;
						align-items: center;

						.unit {
							font-weight: 500;
							font-size: 30rpx;
							color: #999999;
							flex-shrink: 0;
						}

						.uni-easyinput2 {
							width: 240rpx;
							text-align: left;
						}
					}

				}

			}
		}

		.fill {
			width: 100%;
			height: 137rpx;
		}

		.btn {
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background: #3A92FF;
			border-radius: 10rpx;
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 0;
			z-index: 9;
		}
	}
</style>